<template>
    <div class="person-article-container">
        <ul class="tab-article-wrapper">
            <template v-for="(item, index) in tab" >
                <li :class="['tab-item',{'active': index === currentIndex}]" :key="item" @click="onclick(index)">{{item}}</li>
            </template>
        </ul>
        <ul class="person-article-wrapper">
            <li class="content-item"
                v-for="item in articleList"
                :key="item.id"
            >
                <div class="content-wrapper">
                    <h1 class="title">{{item.title}}</h1>
                    <p class="content">{{item.content}}</p>
                    <ul class="article-info">
                        <li class="author">{{item.author}}</li>
                        <li class="date">{{item.date}}</li>
                        <li class="review">
                            <span class="iconfont">&#xe603;</span>
                            {{item.review}}
                        </li>
                        <li class="favour">
                            <span class="iconfont">&#xe674;</span>
                            {{item.favour}}
                        </li>
                        <li class="preview">
                            <span class="iconfont">&#xe70c;</span>
                            {{item.preview}}
                        </li>
                    </ul>
                </div>
                <img  v-if="item.imgUrl" :src="item.imgUrl" class="content-image">
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: {
            tab: {
                type: Array,
                default: () => ['博客', '帖子', '评论', '收藏', '关注']
            },
            len: {
                type: Number,
                default: 7
            }
        },
        data () {
            return {
                articleList: [
                    {
                    id: 12434,
                    title: '鸿蒙OS起步照官网练习创建第一页面和跳转的第二页面需要注意的点 ',
                    content: '弹性伸缩具有应突发、省成本、自动化的业务价值。平台侧将各业务零散、闲置资源进行整合，形成一个大规模资源池，通过弹性调度、库存管控技术在公司运营成本和业务体感中寻求较好的平衡。',
                    author: '微信云开发',
                    date: '2021-03-24 16:22',
                    review: 11324,
                    favour: 11324,
                    preview: '2.9万',
                    imgUrl: require('../../assets/images/9.jpg')
                }, {
                    id: 121734,
                    title: '看了这篇还不会Linux性能分析和优化，你来打我 ',
                    content: '前言 一般互联网的项目都是部署在linux服务器上的，如果linux服务器出了问题，那么咱们平时学习的高并发，稳定性之类的是没有任何意义的，所以对linux性能的把握就显得非常重要，当然很多同学可能觉得这些是运维同学的事情，但是我不这么认为，不管你是架构师，还是crud boy，对项目有个全局的掌控',
                    author: '程序员养成日记',
                    date: '2021-05-06 17:17',
                    review: 11324,
                    favour: 1243,
                    preview: '2.9万',
                    imgUrl: require('../../assets/images/5.jpg')
                }, {
                    id: 1244234,
                    title: '使用netty实现socks5协议 ',
                    content: ' 一、socks5协议简介 SOCKS是一种网络传输协议，主要用于客户端与外网服务器之间通讯的中间传递。 SOCKS是”SOCKetS”的缩写[注 1]。 当防火墙后的客户端要访问外部的服务器时，就跟SOCKS代理服务器连接，这个代理服务器控制客户端访问外网的资格，允许的话，就将客户端的请求发往外部的 ...',
                    author: 'Azing',
                    date: '2021-05-06 17:10',
                    review: 11324,
                    favour: 541,
                    preview: '2.9万',
                    imgUrl: require('../../assets/images/4.jpg')
                },
                    {
                        id: 124234,
                        title: 'Fastjson反序列化漏洞复现 ',
                        content: ' #汇编语言——更多功能 ##转移指令及其原理 可以修改IP，或同时修改cs和IP的指令统称为转移指令。概括地讲，转移指令就是可以控制CPU执行内存中某处代码的指令。 8086CPU的转移行为有以下几类： 只修改IP时，称为段内转移，比如：jmp ax 同时修改cs和IP时，称为段间转移，比如：jmp ...',
                        author: '微信云开发',
                        date: '2021-03-24 16:22',
                        review: 11324,
                        favour: 11324,
                        preview: '2.9万',
                        imgUrl: require('../../assets/images/2.jpg')
                    }, {
                        id: 112734,
                        title: '数据分析处理之PCA OLSR PCR PLSR(NIPALS)及其Matlab代码实现 ',
                        content: '传统的OLS(普通最小二乘)方法无法解决样本数据的共线性(multicollinearity)问题，如果你的数据样本中每个特征变量具有共线性，那么使用基于PCA的PCR和PLSR方法对数据样本进行回归建立模型将会是一个不错的选择。PCA是一种数据降维方式，但同时保持了原始数据降维后的特性；PCR是在 ...',
                        author: '程序员养成日记',
                        date: '2021-05-06 17:17',
                        review: 11324,
                        favour: 1243,
                        preview: '2.9万',
                        imgUrl: require('../../assets/images/7.jpg')
                    }, {
                        id: 4434,
                        title: '使用netty实现socks5协议 ',
                        content: ' 一、socks5协议简介 SOCKS是一种网络传输协议，主要用于客户端与外网服务器之间通讯的中间传递。 SOCKS是”SOCKetS”的缩写[注 1]。 当防火墙后的客户端要访问外部的服务器时，就跟SOCKS代理服务器连接，这个代理服务器控制客户端访问外网的资格，允许的话，就将客户端的请求发往外部的 ...',
                        author: 'Azing',
                        date: '2021-05-06 17:10',
                        review: 11324,
                        favour: 541,
                        preview: '2.9万',
                        imgUrl: require('../../assets/images/6.jpg')
                    },
                    {
                        id: 434,
                        title: '深入探索Android热修复技术原理读书笔记 —— 热修复技术介绍 ',
                        content: '1.1 什么是热修复 对于广大的移动开发者而言，发版更新是最为寻常不过的事了。然而，如果你 发现刚发出去的包有紧急的BUG需要修复，那你就必须需要经过下面这样的流程： 这就是传统的更新流程，步骤十分繁琐。总的来说，传统流程存在这几大弊端： 重新发布版本代价太大 用户下载安装成本太高 BUG 修复不及 ...',
                        author: 'Azing',
                        date: '2021-05-06 17:10',
                        review: 23124,
                        favour: 541,
                        preview: '2.9万',
                        imgUrl: require('../../assets/images/8.png')
                    },
                ],
                currentIndex: 0
            }
        },
        methods: {
            onclick (index) {
                this.articleList.sort(() => {
                    return 0.5 - Math.random()
                })
               this.currentIndex = index
            }
        },
        created () {
            this.articleList.length = this.len
        }
    }
</script>

<style scoped lang="scss">
    @import "./src/common/scss/variable";
    @import "./src/common/scss/mixin";
   .person-article-container {
       width: 100%;
       border-radius: 20px;
       border: 1px solid $border-color;
       background-color: #ffffff;
       overflow: hidden;
       .tab-article-wrapper {
           display: flex;
           align-items: center;
           justify-content: space-between;
           height: 70px;
           padding: 0 108px 0 96px;
           line-height: 45px;
           border-radius: 20px;
           color: $font-gray;
           font-size: 28px;
           text-align: center;
           border: 1px solid $border-color;
           border-top-color: transparent;
           .tab-item {
               position: relative;
               padding: 10px;
               cursor: pointer;
               &::before {
                   content: "";
                   position: absolute;
                   left: 0;
                   bottom: 5px;
                   width: 100%;
                   height: 2px;
                   border-radius: 1px;
                   background-color: $font-hover-color;
                   transform: scaleX(0);
                   transform-origin: center;
                   transition: all 300ms;
               }
               &:hover {
                   color: $font-hover-color;
                   &::before {
                       transform: scaleX(1);
                   }
               }
           }
           .active {
               color: $font-hover-color;
               &::before {
                   background-color: $font-hover-color;
                   transform: scaleX(1);
               }
           }
       }
       .person-article-wrapper {
           padding: 12px 32px 32px;
           box-sizing: border-box;
           .content-item {
               display: flex;
               justify-content: space-between;
               border-bottom: 1px solid rgb(246, 246, 246);
               .content-wrapper {
                   display: flex;
                   flex-direction: column;
                   .title {
                       margin-bottom: 13px;
                       line-height: 20px;
                       color: rgb(51, 51, 51);
                       font-size: 15px;
                   }
                   .content {
                       margin-bottom: 14px;
                       font-size: 13px;
                       line-height: 16px;
                       color: rgb(159, 159, 159);
                       @include overflow-ell(3)
                   }
                   .article-info {
                       display: flex;
                       font-size: 11px;
                       margin-bottom: 17px;
                       line-height: 13px;
                       color: rgb(159, 159, 159);
                       .review, .favour, .preview {
                           .iconfont {
                               margin-right: 2px;
                           }
                       }
                       li + li {
                           margin-left: 24px;
                       }
                   }
               }
               .content-image {
                   margin: 0 21px;
                   flex-shrink: 0;
                   width: 232px;
                   height: 90px;
                   object-fit: cover;
               }
               & + .content-item {
                   margin-top: 14px;
               }
           }
       }
   }
</style>
